<template>
  <div>
    <div class="header">
      <h3>商品热榜<span class="title"> {{ start.replace('-','.') }} ~ {{ end.replace('-','.') }}</span></h3>
      <div class="radios">
        <el-radio-group v-model="radio1" size="mini" text-color="#000" fill="#fff" @change="changeFn">
          <el-radio-button label="周" />
          <el-radio-button label="月" />
          <el-radio-button label="年" />
        </el-radio-group>
      </div>
    </div>
    <div class="echarts">
      <div ref="echarts" class="main" style="width:620px;height:278px;" />
      <div ref="echartsTwo" class="main" style="width:620px;height:278px;" />
    </div>
  </div>
</template>
<script>
// 接口接收三个参数。第一个，1表示按日统计，2按月统计
// 第二个开始日期
// 第三个结束日期
import { getSaleSum, getSaleByarea } from '@/api'
export default {
  data() {
    return {
      // 单选框绑定的数值
      radio1: '周',
      start: '2022-10-17',
      end: new Date().toLocaleDateString().replace(/\//g, '-'),
      collectType: 1,
      leftCharts: {},
      rightCharts: {},
      option1: {
        color: 'red',
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        title: {
          text: '销售额趋势图',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 87, 87,.8)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(255, 87, 87,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [],
            type: 'line',
            smooth: true
          }
        ],
        axisPointer: { lineStyle: { shadowColor: '#000' }}
      },
      option2: {
        tooltip: {

        },
        title: {
          text: '销售额趋势图',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            name: '单位：元',
            type: 'value'
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: '10%',
            data: [],
            roundCap: true
          }
        ]
      }
    }
  },
  created() {
    this.getChartsData()
    this.getChartsDataTwo()
  },
  methods: {
    // 单选发生变化
    changeFn(val) {
      switch (val) {
        case '周':
          this.collectType = 1
          this.start = '2022-10-17'
          this.getChartsData()
          this.getChartsDataTwo()
          break
        case '月':
          this.collectType = 1
          this.start = '2022-10-01'
          this.getChartsData()
          this.getChartsDataTwo()
          break
        case '年':
          this.collectType = 2
          this.start = '2022-01-01'
          this.getChartsData()
          this.getChartsDataTwo()
          break

        default:
          break
      }
    },
    // 初始化左侧表格
    async getChartsData() {
      const res = await getSaleSum(this.collectType, this.start, this.end)
      // console.log(res.data)
      this.option1.xAxis.data = res.data.xAxis
      this.option1.series[0].data = res.data.series
      const MyChart = this.$echarts.init(this.$refs.echarts)
      // console.log(this.option1.xAxis.data, this.option1.series[0].data)
      MyChart.setOption(this.option1)
    },
    // 初始化右侧表格
    async getChartsDataTwo() {
      const res = await getSaleByarea(this.start, this.end)
      // console.log(res.data)
      this.option2.xAxis[0].data = res.data.xAxis
      this.option2.series[0].data = res.data.series
      this.rightCharts = res.data
      this.$echarts.init(this.$refs.echartsTwo).setOption(this.option2)
    }
  }
}
</script>
<style lang="scss" scoped>
.header{
  display: flex;
  justify-content: space-between;
}
.echarts {
  display: flex;
}
</style>
